<template>
  <el-menu mode="horizontal" class="el-menu-demo">
    <div style="height: 60px; line-height: 60px; display: flex;box-shadow: 0 0 15px rgba(0, 0, 0, 0.18);border: none">
      <div style="
    width: 250px;
    padding-left: 30px;
    font-weight: bold;
    font-size: 25px;
    color: #333333">
        办公室在线平台
      </div>
      <div style="flex-grow: 50;"></div>
      <div style="
    flex-grow: 1;
    ">
        <el-dropdown>
        <span class="el-dropdown-link">
          <el-avatar :size="35" :src="user.avatar" style="position: relative; top: 10px"></el-avatar>
            <span style="font-size: 15px;font-weight: bold;margin-left: 4px;">
              {{ user.username }}
            </span>
          <i class="el-icon-arrow-down el-icon--right" style="color:dodgerblue;"></i>
        </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>年龄：{{ user.age }}</el-dropdown-item>
              <el-dropdown-item>性别：{{ user.sex }}</el-dropdown-item>
              <el-dropdown-item @click="$router.push('/login')">退出系统</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </el-menu>

</template>

<script>
export default {
  name: "Header",
  props: ['user'],
  data() {
    return {}
  },
  created() {
  }
}
</script>

<style scoped>

</style>
